<html>

<head>
    <meta name="viewport"
        content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
        charset="utf-8">
    <title>实验室助理值班签到</title>

    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function startTimeShow() {
            var clock = document.getElementById('clock');
            var interval = 0;
            $.get('/index.php/apis/v1/timestamp', data => {
                interval = data.data[0] * 1000 - new Date().getTime();
            });

            setInterval(() => {
                var date = new Date(new Date().getTime() + interval);
                this.clock.innerText = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            }, 1000);
        }
        startTimeShow();
        wx.config({
            "debug": false,
            "appId": "{$appId}",
            "timestamp": eval("{$timestamp}"),
            "nonceStr": "{$nonceStr}",
            "signature": "{$signature}",
            "jsApiList": ['scanQRCode']
        });
        wx.ready(function (res) {
            var statusElement = document.getElementById('wechat_status');
            statusElement.innerText = '配置成功'
            statusElement.style.color = "Green"
            isReady = true;
        })
        wx.error(function (res) {
            var statusElement = document.getElementById('wechat_status');
            statusElement.innerText = '配置失败'
            statusElement.style.color = "Red"
        })

        window.akey = "{$akey|raw}"
        var isReady = false;
        var isSignIn = eval("{$isSignIn}")


        function signIn(bkey, lock) {
            $.post("/index.php/apis/v1/sign_in", {
                akey: window.akey,
                bkey: bkey,
                force: lock
            }, function (res) {
                if (res.status == 200) {
                    alert(res.errmsg);
                } else {
                    if (lock == undefined && res.data.length > 0 && res.data == 'forbidden') {
                        if (confirm('确认要强制签到吗?这将会在系统中留下强制签到记录') == true) {
                            signIn(bkey, true);
                        }
                    } else {
                        alert(res.errmsg + lock);
                    }
                }
                location.reload()
            })
        }
        function signOut(bkey) {
            $.post("/index.php/apis/v1/sign_out", {
                akey: window.akey,
                bkey: bkey
            }, function (res) {
                if (res.status == 200) {
                    alert(res.errmsg);
                } else {
                    alert(res.errmsg);
                }
                location.reload()
            })
        }

        function btnClick() {
            if (isReady) {
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: (res) => {
                        var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
                        if (this.isSignIn) {
                            signIn(result);
                        } else {
                            signOut(result);
                        }
                    }
                });
            } else {
                alert("请等待接口初始化完成")
            }
        }
        function mouseout(obj) {
            var className = "hover";
            var _ecname = obj.className;
            if (_ecname.length == 0) return;
            if (_ecname == className) {
                obj.className = ""; return;
            }
            if (_ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
                obj.className = _ecname.replace((new RegExp("(^|\\s)" + className + "(\\s|$)")), " ");

        }
        function hover(obj) {
            if (!obj) return;
            var className = "hover"
            var _ecname = obj.className;
            if (_ecname.length == 0) {
                obj.className = className;
                return;
            }
            if (_ecname == className || _ecname.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
                return;
            obj.className = _ecname + " " + className;
            return false;
        }

        setTimeout(function () {
            var b = $('#button');
            b.attr('ontouchstart', 'hover(this)');//hover效果
            b.attr('ontouchend', 'mouseout(this)');//去掉hover效果
            var img = $('#button img');
            if (this.isSignIn) {
                img.attr('src', '/wechat/signin.png');
            } else {
                img.attr('src', '/wechat/signout.png');
            }
        }, 0)
    </script>

    <style>
        body {
            /* background: -webkit-linear-gradient(#5e9cdb,#679fe3,#8dd9f9);
            background: -o-linear-gradient(#5e9cdb,#679fe3,#8dd9f9);
            background: -moz-linear-gradient(#5e9cdb,#679fe3,#8dd9f9); */
            background: linear-gradient(#5e9cdb, #679fe3, #8dd9f9);
            /* text-align: center; */
        }

        #main {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            transform: translate(-50%, -50%);
            text-align: center;
            /* border: 1px black solid; */
            font-family: "微软雅黑";
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        #button {
            width: 260px;
            height: 260px;
            border-radius: 50%;
            border: 10px solid #b5d1ee;
            cursor: pointer;
            background: white;
            display: inline-block;
            line-height: 260px;
            text-decoration: none;
        }

        #button hover {
            background: lightgray;
        }


        #button img {
            width: 70%;
            position: relative;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
        }

        #button #clock {
            width: auto;
            height: 20px;
            position: relative;
            top: 0%;
            left: 0%;
            /* margin:0px; */
            color: #6695ff;
            font-size: 30px;
            display: block;
        }

        .info-box {
            width: 100px;
            height: 150px;
            display: inline-block;
            margin: 0px 0px 0px 0px;
            /* border: 1px red solid; */
            vertical-align: top;
        }

        .info-title {
            font-size: 15px;
            color: White;
            height: 20px;
            padding: 10px 4px 12px 4px;
        }

        .info-arrow {
            height: 8px;
            margin: 10px;
            /* border:tan 1px solid; */
        }

        .info-value {
            height: 30px;
            padding: 10px 4px 12px 4px;
            font-size: 20px;
            /* color: green; */
            /* border:tan 1px solid; */
            vertical-align: text-bottom;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="main" onselectstart="return false;">
        <div style="text-align:center;margin: 10px 0px;">
            <a href="#" id="button" onclick="btnClick()">
                <img src="/wechat/signin.png" />
                <div id="clock">00:00:00</div>
            </a>
        </div>
        <div style="cursor: default;">
            <div class="info-box">
                <div class="info-title">接口状态</div>
                <img src="/wechat/arrow.png" class="info-arrow" />
                <div class="info-value" id="wechat_status" style="color:gray"><span>正在配置</span></div>
            </div>
            <div class="info-box">
                <div class="info-title">签到时间</div>
                <img src="/wechat/arrow.png" class="info-arrow" />
                <div class="info-value" style="color:red"><span>{$signInTime}</span></div>
            </div>
            <div class="info-box">
                <div class="info-title">助理姓名</div>
                <img src="/wechat/arrow.png" class="info-arrow" />
                <div class="info-value" style="color:orange"><span>{$name}</span></div>
            </div>
        </div>
    </div>
    </div>
</body>

</html>